<template>
    <div class="content">
        <div class="items-box-fake" v-for='items in categoryItemGetData()'  :key='items.id'>
          <kapian :arr="items" maxLength="72" :zid="id"></kapian>     
        </div>
    </div>
</template>
  
<script>
import kapian from "@/components/kapian"
import {categoryData} from '@/request/api';
  
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "sanpinglb",
    components: { kapian },
    data () {
      return {
            id: this.$route.params.id,
            page: 0,
            data: []
      }
    },
    // watch:{
    //   $route(to,from){
    //     this.id = to.params.id
    //   },
    //   '$route':'categoryGetData'
    // },
    // 监听钩子函数调用后再次使用同一组件时继续调用钩子中的函数
    // js中调用data值和方法需this.调用
    watch:{   
      $route(to,from){
        this.data = [];
        console.log('created');
        this.categoryGetData()
      }
    },
   //监听路由传输的id值，id值发生改变时可以改变当前组件的id值
    beforeRouteUpdate(to, from){
      // eslint-disable-next-line vue/no-mutating-props
      this.id = to.params.id;
    },
    created() {
      console.log('created');
      this.categoryGetData()
    },
    methods: {
      // created可以用asyan关键字和await来得到响应体，也可以用created来直接调用函数
      categoryGetData() {
        categoryData(this.id, this.page).then(res => {
          this.categoryDataItem(res)
        })
      },
      categoryDataItem(res) {
        this.data.push(res['hits']['hits']['0']['_source']['wall']['docs'])//数组添加元素
      },
      categoryItemGetData() {
        return this.data
      }
    }
}
</script>
   
<style lang = "less" scoped>
.content{
  padding-bottom: 30px;
  text-align: center; 
  margin: 0 auto;
  width: 90.03%;
  margin-top: 180px;
}
// 后代选择器
.content .items-box-fake {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}
</style>